<template>
  <div class="sms-template-create">
    <!-- 页面标题 -->
    <el-card shadow="hover" header="物料管理-短信模板管理-创建短信模板">
      <el-form
        ref="smsTemplateForm"
        :model="form"
        label-width="200px"
        size="medium"
      >
        <!-- 短信模板名称 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="短信模板名称" prop="templateName">
              <el-input
                v-model="form.templateName"
                placeholder="请输入短信模板名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 模板类型 -->
            <el-form-item label="模板类型" prop="templateType">
              <el-select
                v-model="form.templateType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in templateTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- 总行基础模板编号 -->
            <el-form-item label="总行基础模板编号" prop="baseTemplateCode">
              <el-select
                v-model="form.baseTemplateCode"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in baseTemplateCodeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 模板内容 -->
        <el-form-item label="模板内容">
          <div class="temp_main" ref="refTempMain">
            <div v-for="(item, index) in templateOragin" :key="index">
              <div
                v-if="Array.isArray(item)"
                :data-index="index"
                class="temp_flex"
                contenteditable="true"
                @blur="inputBlur"
              >
                <div
                  style="display: inline-block"
                  v-for="(itemIn, indexIn) in item"
                  :key="indexIn"
                  :contenteditable="!!itemIn.type === false"
                  :class="{ temp_tag: !!itemIn.type === true }"
                  :data-id="JSON.stringify(itemIn)"
                >
                  {{ itemIn.value }}
                </div>
              </div>
              <div v-if="typeof item === 'string'" :data-id="item">
                {{ item }}
              </div>
            </div>
          </div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="insertProperty"
          >
            插入属性
          </el-button>
          <div class="tip">
            一条短信为64字符，超过该字符数则拆分为多条短信发送
          </div>
        </el-form-item>

        <!-- 预览展示 -->
        <el-form-item label="预览展示">
          <div class="preview-text">{{ previewContent }}</div>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "SmsTemplateCreate",
  data() {
    return {
      // 表单数据
      form: {
        templateName: "",
        templateType: "",
        baseTemplateCode: "",
        // "您好，【分行名称】为【备注】的【性别】，请尽快参与【活动名称】活动，自定义输入内容 退订回复R",
      },
      textContent: "", // 编辑div中的文本内容
      templateOragin: [
        "您好",
        [
          {
            id: "001",
            name: "【分行名称】",
            type: "input",
            value: "【分行名称】",
          },
          {
            id: "002",
            name: "【备注】",
            value: "备注值",
            type: "",
          },
          {
            id: "003",
            name: "【性别】",
            value: "【性别】",
            type: "select",
          },
        ],
        "为",
        [
          {
            id: "004",
            name: "【活动名称】",
            value: "【活动名称】",
            type: "input",
          },
        ],
        "的",
        [
          {
            id: "005",
            name: "【姓名】",
            value: "【姓名】",
            type: "input",
          },
        ],
      ],
      // 模板类型下拉选项（示例，可替换为接口数据）
      templateTypeOptions: [
        { label: "营销类", value: "marketing" },
        { label: "通知类", value: "notice" },
        { label: "提醒类", value: "remind" },
      ],
      // 总行基础模板编号下拉选项（示例，可替换为接口数据）
      baseTemplateCodeOptions: [
        { label: "BASIC_TEMPLATE_001", value: "BASIC_TEMPLATE_001" },
        { label: "BASIC_TEMPLATE_002", value: "BASIC_TEMPLATE_002" },
      ],
      // 属性列表，用于插入（可扩展）
      properties: ["【分行名称】", "【备注】", "【性别】", "【活动名称】"],
      tagListMain: [
        {
          id: "001",
          name: "【分行名称】",
          type: "input",
          value: "",
        },
        {
          id: "002",
          name: "【备注】",
          type: "input",
          value: "",
        },
        {
          id: "003",
          name: "【性别】",
          type: "select",
          value: "【性别】",
        },
        {
          id: "004",
          name: "【活动名称】",
          type: "input",
          value: "【活动名称】",
        },
        {
          id: "005",
          name: "【姓名】",
          type: "input",
          value: "【姓名】",
        },
      ],
      selection: null,
    };
  },
  computed: {
    // 预览内容，简单模拟变量替换（实际可根据需求完善）
    previewContent() {
      let content = "";
      this.templateOragin.forEach((ele) => {
        if (typeof ele === "string") {
          content += ele;
        } else if (Array.isArray(ele)) {
          ele.forEach((eleIn) => {
            if (typeof eleIn === "string") {
              content += eleIn;
            } else if (typeof eleIn === "object") {
              content += eleIn.value;
            }
          });
        }
      });
      return content;
    },
  },
  methods: {
    /**
     * 遍历DOM并提取数据的函数, 用于替换 templateOragin 中的数据
     * @param parentDiv input事件所在可编辑div
     */
    extractDOMData(parentDiv) {
      const result = [];

      function traverse(node) {
        for (const child of node.childNodes) {
          if (child.nodeType === Node.TEXT_NODE) {
            // 获取父元素并检查是否有data-id属性
            const parentElement = child.parentElement;
            const hasDataId = parentElement?.hasAttribute("data-id");

            // 文本节点：过滤空文本且父元素没有data-id属性
            const text = child.textContent.trim();
            if (text && !hasDataId) {
              const mText = {
                id: "",
                type: "",
                name: text,
                value: text,
              };
              result.push(mText);
              // 清空当前文本节点
              child.textContent = "";
            }
          } else if (child.nodeType === Node.ELEMENT_NODE) {
            traverse(child); // 递归处理子节点

            if (child.tagName === "DIV") {
              const dataId = child.getAttribute("data-id");
              if (dataId) {
                try {
                  const obj = JSON.parse(dataId);
                  const divText = child.textContent.trim();
                  if (divText) {
                    obj.value = divText; // div中的内容赋值给data-id的value属性
                    child.setAttribute("data-id", JSON.stringify(obj));
                  }
                  result.push(obj);
                } catch (e) {
                  result.push(dataId);
                }
              }
            }
          }
        }
      }

      traverse(parentDiv);
      return result;
    },
    // 遍历DOM并提取数据的函数, 用于替换 templateOragin 中的数据
    // extractDOMData1(element) {
    //   const resultEnd = [];
    //   console.log("--extractDOMData--", element, element.children);

    //   // 遍历直接子元素
    //   Array.from(element.children).forEach((child) => {
    //     // 解析data-id属性
    //     if (child.hasAttribute("data-id")) {
    //       // 解析 data-id
    //       const dataId = JSON.parse(child.getAttribute("data-id"));
    //       // 检查是否为可编辑的子元素
    //       if (
    //         child.hasAttribute("contenteditable") &&
    //         child.getAttribute("contenteditable") === "true"
    //       ) {
    //         // 获取当前内容
    //         const content = child.textContent.trim();
    //         try {
    //           // 更新 value
    //           dataId.value = content;
    //           // 更新 data-id 属性
    //           child.setAttribute("data-id", JSON.stringify(dataId));
    //         } catch (error) {
    //           console.error("解析 data-id 失败:", error);
    //         }
    //       }
    //       try {
    //         resultEnd.push(JSON.parse(JSON.stringify(dataId)));
    //       } catch (error) {
    //         // dataId = `解析错误: ${child.getAttribute("data-id")}`;
    //         resultEnd.push(JSON.parse({}));
    //       }
    //     }
    //     // 递归处理子元素
    //     if (child.children.length > 0) {
    //       item.children = extractDOMData(child);
    //     }
    //   });

    //   // 提取直接文本节点内容
    //   const textNodes = Array.from(element.childNodes).filter(
    //     (node) => node.nodeType === 3 && node.textContent.trim() !== ""
    //   );

    //   // if (textNodes.length > 0) {
    //   //   let mText = textNodes.map((node) => node.textContent.trim()).join(" ");
    //   //   textNodes.map((node) => (node.textContent = ""));
    //   //   resultEnd.push({
    //   //     id: "",
    //   //     type: "",
    //   //     name: mText,
    //   //     value: mText,
    //   //   });
    //   // }
    //   return resultEnd;
    // },
    inputBlur(event) {
      // let mTarget = event.target;
      // let mResult = this.extractDOMData(mTarget);
      // let mIndex = mTarget.getAttribute("data-index");
      // // 使用 Vue.set 或 this.$set 确保数组修改是响应式的
      // this.$set(this.templateOragin, mIndex, mResult);
      // console.log("--mTarget--", mTarget);
      // console.log("mResult", mResult);
      this.selection = null;
      this.selection = window.getSelection();
      console.log("--selection--", this.selection);
    },
    // 插入属性到模板内容
    insertProperty() {
      this.insertData();
      return
      if (this.selection.rangeCount > 0) {
        const range = this.selection.getRangeAt(0);

        // 创建包含属性的元素
        const attributeDiv = document.createElement("div");
        let dataId = {
          id: "003",
          name: "【性别】",
          type: "select",
          value: "【性别】",
        };
        attributeDiv.className = "temp_tag";
        attributeDiv.contentEditable = false;
        attributeDiv.setAttribute("data-id", JSON.stringify(dataId));
        attributeDiv.innerHTML = dataId.value;

        // 在光标位置插入属性
        range.deleteContents();
        range.surroundContents(attributeDiv);

        // 将光标移动到插入的属性后面
        range.setEndAfter(attributeDiv);
        this.selection.removeAllRanges();
        this.selection.addRange(range);

        // 更新内容数据
        // this.content = div.innerHTML;
      }
    },
    insertData() {
      let selection = this.selection;
      if (selection && selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        // 创建要插入的内容（文字或不可编辑标签）
        // const newText = document.createTextNode("插入的文字");
        // 或创建不可编辑标签：
        // const newSpan = document.createElement('span');
        // newSpan.contenteditable = false;
        // newSpan.textContent = '【新标签】';
        // 创建包含属性的元素
        const attributeDiv = document.createElement("div");
        let dataId = {
          id: "003",
          name: "【性别】",
          type: "select",
          value: "【性别】",
        };
        attributeDiv.className = "temp_tag";
        attributeDiv.contentEditable = false;
        attributeDiv.setAttribute("data-id", JSON.stringify(dataId));
        attributeDiv.textContent = dataId.value;
        range.insertNode(attributeDiv);
        // 插入后，把光标移到新内容后面，继续编辑
        range.setStartAfter(attributeDiv);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    },
    // 保存
    handleSave() {
      this.$refs.smsTemplateForm.validate((valid) => {
        if (valid) {
          // 这里可调用接口提交表单数据：this.form
          this.$message.success("表单验证通过，可提交接口保存");
          // 示例：调用 saveTemplate 接口
          // this.$api.smsTemplate.save(this.form).then(res => {
          //   if (res.success) {
          //     this.$message.success('保存成功');
          //     this.$router.back();
          //   } else {
          //     this.$message.error('保存失败：' + res.msg);
          //   }
          // });
        } else {
          this.$message.error("请完善表单必填项");
        }
      });
    },
    // 取消
    handleCancel() {
      this.$refs.smsTemplateForm.resetFields();
      this.$router.back();
    },
    // 处理内容变化
    handleContentChange(event) {
      const newContent = event.target;
      console.log("内容变化:", newContent.textContent);
      // 这里可以更新数据或执行其他操作
      // 例如：this.form.templateContent = newContent;
    },
  },
};
</script>

<style>
.sms-template-create {
  padding: 20px;
}
.tip {
  color: #999;
  font-size: 12px;
  margin-top: 8px;
}
.temp_main {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 6px;
  letter-spacing: 1px;
}
.temp_flex {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 5px 10px;
  line-height: 20px;
  border-radius: 4px;
}
.temp_tag {
  display: inline-block;
  line-height: 20px;
  color: blue;
  border: 1px solid blue;
  /* margin: 0 10px; */
  border-radius: 4px;
}
/* :focus-visible {
  outline: none;
} */
.preview-text {
  text-align: left;
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 6px;
  letter-spacing: 1px;
}
</style>